/**
 * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
 * SPDX-license-identifier: BSD-3-Clause
 */
 import { useEffect,useState } from 'react';
import { IconWifi } from '@arco-design/web-react/icon';
import Triangle from '@/assets/AiImgs/sanjiao.png'
 import utils from '@/utils/utils';
import styles from './index.module.less';
 import './index.less'; 
 import { useSearchParams } from 'react-router-dom';
 import {getTrainChat} from '@/api/train'

 export default function () {
    const [searchParams,setSearchParams] = useSearchParams()
    const picid = searchParams.get('prcid')
    const [chatList,setChatList]=useState<any>([])
    useEffect(()=>{
      getTrainChat(picid).then(res=>{
        if(res.code===2000){
          setChatList(res?.data?.list)
        }
      })
    },[])
     return (
      <div>
          <div className="max-w-md mx-auto bg-white p-5  shadow-sm h-[78vh] overflow-y-auto rounded-t-2xl">
            {chatList?.map((m:any,index:number)=>{
                return <div key={index}>
                  {m?.type === "system" && (
                    <div className="flex items-start gap-3 mb-[15px] group">
                      <div className=" max-w-[90%]">
                        <div className="bg-[#F5F5F5] px-4 py-2 rounded-xl rounded-tl-none flex">
                          <div className='pr-2 pt-0.5'><IconWifi className="rotate-90  size-5"/></div>
                          <p className="text-[#222222] text-[15px]/6">{m?.content}</p>
                        </div>
                      </div>
                    </div>
                  )}
                {m?.type === "user" && (
                  <div className="flex items-start gap-3 mb-[15px] group justify-end">
                    <div className="relative max-w-[315px]">
                      
                      <div className="bg-[#FFBC0D]  text-[#222222] py-2 rounded-xl rounded-tr-[3px]">
                        <div className='flex ml-[15px] justify-between'>
                          <p className='text-[15px]/6'>{m?.content}</p>
                          <div className='text-right  pt-0.5 pr-[15px]'><IconWifi className="-rotate-90 size-5" /></div>
                        </div>
                        <img src={Triangle} style={{width:'10px'}} className='ml-[36px]'/>
                        <div className='bg-white mx-[5px] px-2.5 py-2  -mb-0.5 -mt-px -mx-2 rounded-xl'>
                            <div className='pt-2'>
                              
                                <span className='font-bold text-sm bgYellow'>改进建议</span>
                                {
                                  m.feedback.map((item: any, idx: number) => (
                                    <p className='text-sm/6 pt-2' key={idx}>{item}</p>
                                  ))
                                }
                            </div>
                            <div className='first-line: pt-2'>
                                <span className='font-bold text-sm  bgYellow'>润色表达</span>
                                <p className='text-sm/6 pt-2'>{m.refine_expression}</p>
                            </div>
                        </div> 
                      </div>
                    </div>
                  </div>
                )}
                </div>
            })}

            {/* <div className="flex items-start gap-3 mb-[15px] group">
                <div className=" max-w-[90%]">
                    <div className="bg-[#F5F5F5] px-4 py-2 rounded-xl rounded-tl-none flex">
                    <div className='pr-2 pt-0.5'><IconWifi className="rotate-90  size-5"/></div>
                    <p className="text-[#222222] text-[15px]/6">你好，我要投诉，刚刚遇到突发情况让我很不满</p>
                    </div>
              </div>
            </div>
            <div className="flex items-start gap-3 mb-[15px] group justify-end">
              <div className="relative max-w-[315px]">
                
                <div className="bg-[#FFBC0D]  text-[#222222] py-2 rounded-xl rounded-tr-[3px]">
                  <div className='flex ml-[15px]'>
                    <p className='text-[15px]/6'>你好，请问你遇到了什么情况，可以跟我沟通。我来尽力帮人求助</p>
                    <div className='text-right  pt-0.5 pr-[15px]'><IconWifi className="-rotate-90 size-5" /></div>
                  </div>
                  <img src={Triangle} style={{width:'10px'}} className='ml-[36px]'/>
                  <div className='bg-white mx-[5px] px-2.5 py-2  -mb-0.5 -mt-px -mx-2 rounded-xl'>
                      <div className='pt-2'>
                         
                          <span className='font-bold text-sm bgYellow'>改进建议</span>
                          <p className='text-sm/6 pt-2'>A、你的表达略显生硬，可能会让顾客感觉不够亲切。建议你使用更柔和的语气，比如"您能详细告诉我…"<br/>
                              B、你的问题核心正确，但可以更具体一些。建议你在提问时加入一些细节描述，比如"…遇到了什么问题吗？"。<br/>
                            C、你在场景中的表现不错，但可以更自然一些。建议你在对话中注意语速和语调，让对话更流畅。</p>
                      </div>
                      <div className='first-line: pt-2'>
                          <span className='font-bold text-sm  bgYellow'>润色表达</span>
                          <p className='text-sm/6 pt-2'>您能详细告诉我遇到了什么问题吗？这样我才能更好地帮您解决。</p>
                      </div>
                  </div> 
                </div>
              </div>
            </div>



            <div className="flex items-start gap-3 mb-[15px] group">
                <div className=" max-w-[90%]">
                    <div className="bg-[#F5F5F5] px-4 py-2 rounded-xl rounded-tl-none  flex">
                    <div className='pr-2 pt-0.5'><IconWifi className="rotate-90  size-5"/></div>
                    <p className="text-[#222222] text-[15px]/6">我还没吃完，店员就把餐品收走了</p>
                    </div>
              </div>
            </div>
            <div className="flex gap-3 mb-[15px] group justify-end">
              <div className="relative max-w-[315px]">
                <div className="bg-[#FFBC0D] text-[#222222] py-2 rounded-xl rounded-tr-[3px] ">
                  <div className='flex justify-between ml-[15px]'>
                    <p className='text-[15px]/6'>抱歉，你能详细描述一下事情经过吗</p>
                    <div className='text-right pt-0.5 pr-[15px]'><IconWifi className="-rotate-90 size-5" /></div>
                  </div>
                  <img src={Triangle} style={{width:'10px'}} className='ml-[36px]'/>
                  <div className='bg-white px-2.5 mx-[5px] py-2 -mb-0.5 -mt-px -mx-2 rounded-xl'>
                      <div className='pt-2'>
                          <span className='font-bold text-sm bgYellow'>改进建议</span>
                          <p className='text-sm/6 pt-2'>你的表达略显生硬，可能会让顾客感觉不够亲切。建议你使用更柔和的语气，比如"您能详细告诉我…"</p>
                      </div>
                      <div className='first-line: pt-2'>
                          <span className='font-bold text-sm  bgYellow'>润色表达</span>
                          <p className='text-sm/6 pt-2'>您能详细告诉我遇到了什么问题吗？这样我才能更好地帮您解决。</p>
                      </div>
                  </div> 
                </div>
              </div>
            </div> */}
          </div>
          <div className='btnBG'></div>
      </div>
        
     );
 }
